<template>
  <section class="bg-gray-fa lg:pt-20 py-10 lg:pb-12 px-[10px]">
    <div class="container mx-auto">
      <div class="lg:text-3xl text-xl text-gray-33 font-bold text-center">
        <span class="lg:inline block"> 一站式AI解决方案， </span>
        提供管家式人工智能落地服务
      </div>
      <div class="lg:mt-4 mt-2 text-gray-66 lg:text-lg text-sm text-center">
        支持算法定制，最快3天出新算法
      </div>
      <ul
        class="
          gs_reveal gs_reveal_fromBottom
          lg:mt-16
          mt-6
          grid
          lg:grid-cols-4
          grid-cols-2
          lg:gap-4
          gap-[10px]
        "
      >
        <li
          v-for="item in list"
          :key="item.title"
          class="
            group
            bg-white
            shadow-lg
            rounded
            lg:pt-9
            pt-4
            lg:px-8
            px-3
            lg:pb-12
            pb-6
            hover:-translate-y-5 hover-bg-red
            duration-500
          "
        >
          <img
            :src="item.icon"
            class="ai-icon lg:w-16 lg:h-16 w-14 h-14"
            alt=""
          />
          <div
            class="
              lg:mt-2
              text-[#202020]
              group-hover:text-white
              lg:text-xl
              text-base
              font-bold
            "
          >
            {{ item.title }}
          </div>
          <div
            class="
              lg:mt-4
              mt-2
              text-[#747F92]
              group-hover:text-white
              lg:leading-7 lg:text-sm
              leading-5
              text-xs
            "
          >
            {{ item.text }}
          </div>
        </li>
      </ul>
    </div>
    <info-btn class="lg:flex hidden">获取方案介绍</info-btn>
  </section>
</template>

<script>
import icon5 from "@/assets/img/ai-icon5.png";
import icon6 from "@/assets/img/ai-icon6.png";
import icon7 from "@/assets/img/ai-icon7.png";
import icon8 from "@/assets/img/ai-icon8.png";
export default {
  data() {
    return {
      list: [
        {
          icon: icon5,
          title: "数据采集服务",
          text: "快速交付涵盖多场景、多类型的优质数据，包括图像、视频、语音、音频和文本等全维度数据，满足客户特定 AI 项目的数据需求。",
        },
        {
          icon: icon6,
          title: "数据标注服务",
          text: "自研智能数据标注平台，快速响应不同数据标注场景，采标一体，具备功能强大的标注工具箱，快速交付高质量的训练数据。",
        },
        {
          icon: icon7,
          title: "算法定制服务",
          text: "基于深度学习算法的图像分析及识别技术，精通多种算法框架，可针对特定场景定制高精度的人工智能算法。",
        },
        {
          icon: icon8,
          title: "业务平台开发",
          text: "深度结合客户需求，提供整体AI解决方案，满足特定场景的业务需求。",
        },
      ],
    };
  },
};
</script>

<style scoped>
/deep/ .group:nth-child(1):hover .ai-icon {
  content: url("@/assets/img/ai-icon5-w.png");
}

/deep/ .group:nth-child(2):hover .ai-icon {
  content: url("@/assets/img/ai-icon6-w.png");
}

/deep/ .group:nth-child(3):hover .ai-icon {
  content: url("@/assets/img/ai-icon7-w.png");
}

/deep/ .group:nth-child(4):hover .ai-icon {
  content: url("@/assets/img/ai-icon8-w.png");
}
</style>